<template>
	<div class="mine">
		<div class="box">
			<div class="hearderBox">
				<div class="hearderBoxIcon" @click="goBack">
					<img src="../../assets/images/fanhuijiantou.png" alt="">
				</div>
				银行卡管理
			</div>
			<div class="proList">
				<div class="magBox" :class="{focusBox:isShowOne,error:isShowOness}">
					<div class="input-block" @click="getMsg('0')"><label for="password"
							:class="{inputblocklabel:isShowOne}">开户人名字</label>
						<input type="text" :class="{inputblockinput:isShowOne}" v-model="name"  @blur="blurinput('0')">
					</div>
				</div>
				<div class="zhuyiBoxTow" v-if="isShowOness">
					<img src="../../assets/images/zhuyitow.png" alt="">
					必填
				</div>
				<div class="zhuyiBox" v-if="!isShowOness">
					<img src="../../assets/images/zhuyi.png" alt="">
					必须与您的银行帐户姓名一致，否则无法进行取款
				</div>
				<div class="mc-form-item" @click="drawer = true">
					<div class="mc-input-field-label">收款银行</div>
					<div class="mc-input-base1">{{selectbank}}</div>
					<img src="../../assets/images/add.png" alt="">
				</div>
				<div class="magBox " :class="{focusBox:isShowTow,error:isShowTowss}">
					<div class="input-block" @click="getMsg('1')"><label for="password"
							:class="{inputblocklabel:isShowTow}">银行账号</label>
						<input type="text" :class="{inputblockinput:isShowTow}" v-model="bankcard"  @blur="blurinput('1')">
					</div>
				</div>
				<div class="zhuyiBoxTow" v-if="isShowTowss">
					<img src="../../assets/images/zhuyitow.png" alt="">
					必填
				</div>
				<div class="zhuyiBox" v-if="!isShowTowss">
					<img src="../../assets/images/zhuyi.png" alt="">
					请输入您的银行账号
				</div>
				<div class="magBox" :class="{focusBox:isShowThree,error:isShowThreess}">
					<div class="input-block" @click="getMsg('2')"><label for="password"
							:class="{inputblocklabel:isShowThree}">开户行网点</label>
						<input type="text"  :class="{inputblockinput:isShowThree}" v-model="wangdian" 
							@blur="blurinput('2')">
					</div>
				</div>
				<div class="zhuyiBoxTow" v-if="isShowThreess">
					<img src="../../assets/images/zhuyitow.png" alt="">
					必填
				</div>
				<div class="zhuyiBox" v-if="!isShowThreess">
					<img src="../../assets/images/zhuyi.png" alt="">
					请输入您的开户行网点
				</div>
				<div class="btnssss" @click="submit()">确认</div>
			</div>

		</div>
		<el-drawer :visible.sync="drawer" direction="btt" :show-close="false"  :modal-append-to-body="false">
			<div class="nrc-tabs" style="margin-top: 20px;">
				<div class="nrc-tabs-nav">
					<span class="nrc-tabs-tab" :class="tab == 0 ? 'active':''" @click="tab = 0">全部</span>
				</div>
				<div class="nrc-tab-pane" v-if="tab == 0">
					<div class="item" :class="selectbank == item ? 'active':''" v-for="(item,index) in bank" :key="index" @click="selectfanli(item)">{{item}}</div>
				</div>
			</div>
		</el-drawer>
		<!-- <div class="buttons">
			<img src="../../assets/images/xiaoxi.png" alt="" />
		</div> -->
	</div>
</template>

<script>
	import { newbindbank,banklist } from "../../utils/api.js"
	export default {
		data() {
			return {
				close: true,
				isShowOne: false,
				isShowTow: false,
				isShowThree: false,
				isShowOness: false,
				isShowTowss: false,
				isShowThreess: false,
				isShowOneeye: false,
				isShowToweye: false,
				isShowThreeeye: false,
				name:'',
				bankcard:'',
				wangdian:'',
				drawer: false,
				tab:0,
				bank:[],
				selectbank:''
			}
		},
		created() {},
		mounted() {
			this.getbanklist()
		},
		methods: {
			getbanklist(){
				banklist().then((res) => {
					if(res.status.errorCode == 0){
						this.bank = res.data
						this.selectbank = res.data[1]
					}else{
						this.$message.error(res.status.msg);
					}
				}).catch((err)=>{
					console.log(err,'err')
				});
			},
			getMsg(num) {
				if (num == 0) {
					this.isShowOne = !this.isShowOne;
				}
				if (num == 1) {
					this.isShowTow = !this.isShowTow;
				}
				if (num == 2) {
					this.isShowThree = !this.isShowThree;
				}
			},
			blurinput(num) {
				if (num == 0) {
					if (!this.passwordOne) {
						this.isShowOness = true;
						this.isShowOne = !this.isShowOne;
					}else{
						this.isShowOness = false;
					}
				}
				if (num == 1) {
					if (!this.passwordTow) {
						this.isShowTowss = true;
						this.isShowTow = !this.isShowTow;
					}else{
						this.isShowTowss = false;
					}
				}
				if (num == 2) {
					if (!this.passwordThree) {
						this.isShowThreess = true;
						this.isShowThree = !this.isShowThree;
					}else{
						this.isShowThreess = false;
					}
				}
			},
			goBack() {
				this.$router.go(-1)
			},
			submit(){
				let that = this;
				if(this.name == ''){
					this.$message.error('请输入开户人名字');
					return false
				}
				if(this.psd == ''){
					this.$message.error('请输入收款银行');
					return false
				}
				if(this.bankcard == ''){
					this.$message.error('请输入银行账号');
					return false
				}
				if(this.wangdian == ''){
					this.$message.error('请输入开户行网点');
					return false
				}
				let data = {
					bank_username:this.name,
					bank_name:this.selectbank,
					bank_card:this.bankcard,
					bank_branch_name:this.wangdian
				}
				newbindbank(data).then((res) => {
					if(res.status.errorCode == 0){
						this.$message.success(res.status.msg);
						setTimeout(function(){
							that.$router.go(-1)
						},1000)
					}else{
						this.$message.error(res.status.msg);
					}
				}).catch((err)=>{
					console.log(err,'err')
				});
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.mine {
		height: -webkit-fill-available;
		/* padding-bottom: calc(50px + env(safe-area-inset-bottom)); */
	}

	.box {
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		/* min-height: 100vh; */
	}

	.buttons {
		position: fixed;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttons img {
		width: 32px;
		height: 32px;
	}


	.hearderBox {
		width: 100%;
		height: 45px;
		background-color: #fff;
		position: fixed;
		top: 0;
		font-weight: 300;
		line-height: 45px;
		text-align: center;
		font-size: 20px;
		color: #545658;
		box-shadow: inset 0 -1px 0 #ececec;
		left: 0;
		overflow: hidden;
		z-index: 99;
	}

	.hearderBoxIcon {
		width: 50px;
		position: fixed;
		top: 3px;
		left: 0px;
	}

	.hearderBoxIcon img {
		width: 20px;
		height: 20px;
	}

	.proList {
		width: 100%;
		padding: 60px 20px 0;
		box-sizing: border-box;
	}

	.magBox {
		border-radius: 5px;
		box-sizing: border-box;
		display: flex;
		height: 54px;
		justify-content: space-around;
		padding: 0 15px;
		background-color: #fbfbfb;
		border: 1px solid #e9e9e9;
		color: #777;
		margin-top: 10px;
		font-weight: 300;
		position: relative;
	}

	.input-block {
		box-sizing: border-box;
		position: relative;
		width: 100%;
	}

	.input-block label {
		color: #a0a3a5;
		font-size: 14px;
		line-height: 1.29;
		pointer-events: none;
		position: absolute;
		top: 18px;
		transition: .2s;
		font-weight: 300;
		padding-left: 12px;
	}

	.input-block label:before {
		bottom: 0;
		color: #e94951;
		content: "*";
		font-size: 10px;
		left: 0;
		margin: auto;
		position: absolute;
		top: 4px;
	}

	.inputblocklabel {
		font-size: 10px !important;
		top: 8px !important;
	}

	.input-block input {
		background-color: transparent;
		color: #545658;
		border: none !important;
		box-sizing: border-box;
		height: 100%;
		position: absolute;
		top: 0;
		transition: .2s;
		width: 100%;
		outline: medium;
		padding: 0;
		font-family: sans-serif;
		font-size: 100%;
		line-height: 1.15;
		margin: 0;
	}

	.input-block input:focus {
		height: 28px;
		box-shadow: none;
		top: 24px;
	}
	.inputblockinput {
		height: 28px !important;
		box-shadow: none !important;
		top: 24px !important;
	}

	.focusBox {
		border: 1px solid #5235ff;
		background-color: #fff;
		border-color: rgba(114, 64, 255, .5);
		box-shadow: 0 0 0 2px rgba(114, 64, 255, .1);
	}
/* 
	.action-block {
		display: flex;
		justify-content: flex-end;
		width: 15%;
		align-items: center;
	}

	.action-block img {
		width: 20px;
		height: 20px;
	} */

	.zhuyiBox img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.zhuyiBox {
		display: flex;
		font-size: 12px;
		margin: 5px 0 10px;
		color: #86898c;
		font-weight: 300;
	}

	.zhuyiBoxTow {}

	.zhuyiBoxTow img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.zhuyiBoxTow {
		display: flex;
		font-size: 12px;
		margin: 5px 0 10px;
		color: #e94951;
		font-weight: 300;
	}

	.btnssss {
		margin-top: 20px;
		background-color: #7240ff;
		border: none;
		border-radius: 3px;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 44px;
		width: 100%;
		text-align: center;
		line-height: 44px;
	}

	.error {
		border: 1px solid #e94951;
		color: #e94951;
	}
	.mc-form-item{
		margin-top: 10px;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 5px;
		display: block;
		min-height: 54px;
		position: relative;
		transition: .8s;
		margin-bottom: 10px;
	}
	.mc-form-item img{
		position: absolute;
		right: 16px;
		top: 35%;
		width: 18px;
		height: 18px;
	}
	.mc-input-field-label{
		font-size: 10px;
		top: 8px;
		color: #939698;
		padding-left: 15px;
		position: absolute;
		transition: .2s;
	}
	.mc-input-base1{
		box-shadow: none;
		font-size: 14px;
		height: 28px;
		top: 24px;
		padding: 0 15px;
		position: absolute;
		width: 100%;
		background-color: transparent;
		color: #545658;
		display: flex;
	}
	
	/deep/ .el-drawer{
		height: 75vh !important;
	}
	/deep/ .el-drawer__header{
		margin: 0;
		padding: 0;
	}
	.nrc-tabs-nav{
		align-items: center;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.nrc-tabs-tab{
		height: auto;
		opacity: .7;
		box-sizing: border-box;
		display: block;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		min-width: 65px;
		text-align: center;
		padding: 4px 8px;
		width: 25%;
	}
	.nrc-tabs-tab.active{
		background-image: inherit;
		border-bottom: inherit;
		color: inherit;
		font-weight: 700;
		opacity: 1;
	}
	.nrc-tab-pane{
		padding: 24px 13px 0;
	}
	.nrc-tab-pane .item{
		flex: 1;
		height: 30px;
		align-items: center;
		display: flex;
		justify-content: center;
		border:1px solid #000;
		/* box-shadow: 0 0 5px 2px rgba(82,53,255,.8); */
		background-color: #fafafc;
		border-radius: 5px;
		margin-bottom: 20px;
		min-height: 42px;
		padding: 7px 9px;
	}
	.nrc-tab-pane .item.active{
		border-color: rgba(82,53,255,.8);
		box-shadow: 0 0 5px 2px rgba(82,53,255,.8);
	}
	
</style>